<script lang="ts">
export default {
  name: 'Test-test1-1'
}
</script>

<template>
  <h2>计数器 - 测试使用 ref 来处理单个数据的响应式更新。</h2>
  <div class="test">
    <div class="counter">
      <h2>{{ Counter }}</h2>
      <button @click="countIncrement">Increment</button>
      <button @click="countDecrement">Decrement</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

let Counter = ref(0)

const countIncrement = () => {
  Counter.value++
}

const countDecrement = () => {
  Counter.value--
}
</script>

<style scoped>
.counter {
  text-align: center;
}

button {
  margin: 5px;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

body {
  padding: 20px;
}
h2 {
  color: red;
}
h3 {
  color: rgb(220, 85, 85);
}
h4 {
  color: skyblue;
}
.hr-style {
  border: 3px solid gold;
  margin: 20px 0;
}
.group {
  border: 4px solid rgb(102, 215, 85);
  margin: 10px;
  padding: 10px;
}
.group3 {
  border: 2px solid rgb(64, 163, 199);
  margin: 10px;
  padding: 10px;
}
.note {
  margin: 10px;
  padding: 10px;
  border: 3px solid rgb(221, 121, 202);
}
.note p {
  color: rgb(226, 106, 204);
  font-weight: bold;
}
</style>
